<template>
    <el-dialog :title="titleMap[mode]" width="500" v-model="visible" @closed="$emit('closed')">
        <div class="form-wrap">
            <el-form :model="form" :rules="rules" ref="drawerForm" label-width="100px" label-position="left">
                <el-form-item prop="menuName" label="菜单名称" placeholder="菜单显示的名字">
                    <el-input v-model="form.menuName"></el-input>
                </el-form-item>
                <el-form-item prop="menuAction" label="链接方式" placeholder="链接执行操作">
					<el-radio-group v-model="form.menuAction" class="ml-8">
						<el-radio label="0" size="large">链接跳转</el-radio>
						<el-radio label="1" size="large">表单链接</el-radio>
						<el-radio label="2" size="large">数据模型</el-radio>
					</el-radio-group>
                </el-form-item>
                <el-form-item prop="menuUrl" v-show="form.menuAction == '0'" label="菜单链接" placeholder="菜单的链接地址">
                    <el-input v-model="form.menuUrl"></el-input>
                </el-form-item>
                <el-form-item prop="formId" v-show="form.menuAction == '1'" label="数据表单" placeholder="请选择表单">
                    <el-select style="width: 100%" v-model="form.formId">
                        <el-option v-for="(item, index) in formList" :key="index" :label="item.formName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
				<el-form-item prop="formId" v-show="form.menuAction == '2'" label="数据模型" placeholder="请选择数据模型">
					<el-select style="width: 100%" v-model="form.menuModel">
						<el-option v-for="(item, index) in modelList" :key="index" :label="item.tableComment" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="上级菜单" prop="menuParent">
                    <el-cascader v-model="form.menuParent" :options="menuOptions" :props="menuProps" :show-all-levels="false" :placeholder="menuTitle" clearable disabled style="width: 100%"></el-cascader>
                </el-form-item>
				<el-form-item prop="sort" label="菜单排序" placeholder="菜单显示顺序">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
                <el-form-item label="菜单图标" prop="menuIcon">
                    <jdIconSelect v-model="form.menuIcon" clearable></jdIconSelect>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            mode: 'add',
            titleMap: {
                add: '新增菜单',
                edit: '编辑菜单'
            },
            submitLoading: false,
            menuOptions: [
                // {
                //     id: 1,
                //     title: '测试菜单1',
                //     children: [
                //         { id: 100, title: '用户管理', children: null },
                //         { id: 104, title: '岗位管理', children: null },
                //         { id: 101, title: '角色管理', children: null },
                //         { id: 11, title: '部门管理', children: null },
                //         { id: 2084, title: '前台用户', children: null }
                //     ]
                // },
                // { id: 2061, title: '测试菜单2', children: null },
                // { id: 501, title: '测试菜单3', children: null }
            ],
            formList: [],
			modelList:[],
            menuProps: {
                value: 'id',
                label: 'title',
                checkStrictly: true
            },
            menuTitle: '顶级菜单',
            form: {
                id: null,
                menuName: '',
                menuParent: '',
                menuAction: '0',
                menuIcon: '',
                formId: null,
                menuUrl: ''
            },
            rules: {
                menuName: { required: true, trigger: 'blur', message: '菜单名称不能为空' },
                menuUrl: { required: true, trigger: 'blur', message: '菜单地址不能为空' },
                formId: { required: true, trigger: 'blur', message: '表单不能为空' }
            },
            visible: false
        };
    },
    methods: {
        open(mode) {
            this.mode = mode;
            this.visible = true;
            this.$nextTick(() => {
                this.$refs.drawerForm.clearValidate();
            });
            this.getFormListByAppId();
			this.getModelByAppId();
            return this;
        },
        setData(node, item, mode) {
            this.menuTitle = item.label;
            this.open(mode);
            if (mode == 'edit') {
                let id;
                let title;
                if (node.level === 1) {
                    id = item.id;
                    title = item.label;
                } else {
                    id = node.parent.data.id;
                    title = node.parent.data.label;
                }

                this.menuOptions = [
                    {
                        id,
                        title
                    }
                ];
                this.form = {
                    id: node.data.id,
                    menuUrl: node.data.menuUrl,
                    menuName: node.data.label,
                    menuIcon: node.data.icon,
                    menuParent: id,
                    menuAction: node.data.menuAction,
                    formId: node.data.formId,
					sort:node.data.sort
                };
            } else {
                this.form = {
                    id: null,
                    menuUrl: '',
                    menuName: '',
                    menuIcon: '',
                    menuParent: item.id,
                    menuAction: '0',
                    formId: null
                };
            }
        },
        async getFormListByAppId() {
            const res = await this.$API.app.form.getAppForm.get(this.$route.query.appId);
            if (res.code == 200) {
                this.formList = res.data;
            }
        },
		// 根据APPID获取数据模型
	   async getModelByAppId(){
			let res = await this.$API.app.model.listModelByAppId.get({pageSize: 100, "appId": this.$route.query.appId});
		    if (res.code == 200) {
		  	    this.modelList = res.data;
		    }
		},
        submit() {
            this.submitLoading = true;
            this.$emit('success', this.form);
            let _this = this;
            setTimeout(function () {
                _this.visible = false;
                _this.submitLoading = false;
            }, 500);
        }
    }
};
</script>

<style lang="scss" scoped>
.form-wrap {
    padding: 20px;
    overflow-y: auto;
}
</style>
